[#623] Book-style page flip + swipe gesture navigation#629
[#623] Book-style page flip + swipe gesture navigation#629realproject7 merged 3 commits intomainfrom
Conversation
- Replace slide+fade with 3D rotateY page flip animation (400ms) using CSS perspective and transform-origin for authentic book feel - Add touch swipe navigation: swipe left → next, swipe right → prev with 50px threshold and horizontal dominance check to avoid interfering with vertical scrolling Fixes #623 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
LGTM. Clean implementation — CSS rotateY with proper perspective/transform-origin, swipe threshold with horizontal dominance check prevents scroll interference, timeout correctly updated to match 400ms animation.
Minor note: flip-forward and flip-backward keyframes in globals.css are defined but not referenced by any class — consider removing if not planned for exit animations. Not a blocker.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: REQUEST CHANGES
Summary
The PR adds swipe handling and 3D transform styling, but the navigation flow still swaps chapter content before the outgoing page-turn completes.
Findings
- [medium] The current chapter is replaced on the next animation frame, so the 400ms flip mostly runs on the incoming chapter instead of the page being turned.
- File:
src/components/ReadingMode.tsx:44 - File:
src/app/globals.css:218 - Suggestion: keep the current chapter rendered through the flip-out phase and only swap
currentIdxafter that phase finishes, or render separate outgoing/incoming layers and use the outgoingflip-forward/flip-backwardanimation on the page that is leaving.
- File:
Decision
Request changes. As written, this does not meet issue #623's core behavior that the current page flips away to reveal the next page underneath; it is still effectively an animated content swap with the new chapter rotating in.
…lips in Split animation into flip-out (200ms) → content swap → flip-in (200ms) so the old page visibly turns away before the new page appears. Added a flipping guard to prevent rapid-fire navigation during animation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: APPROVE
Summary
The updated PR fixes the sequencing issue from the prior review by splitting navigation into a flip-out phase on the current chapter followed by a content swap and flip-in phase for the next chapter.
Findings
- No findings.
Decision
Approve. src/components/ReadingMode.tsx now keeps the outgoing page mounted through the first 200ms animation before swapping currentIdx, and src/app/globals.css provides matching outgoing/incoming flip classes for the two-phase book-turn effect. The added flipping guard also prevents overlapping navigations during the animation window.
2 participants
Summary
rotateY()+perspective(1200px)— next flips from right edge, prev flips from left edge (400ms ease-in-out)dx > dy * 1.5) to avoid interfering with vertical scrollingTest plan
Fixes #623
🤖 Generated with Claude Code